<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>修改密码</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- 引入外部头文件 -->
  <include file="layout/header" />
  <!-- 当前文件定制 -->
  <link rel="stylesheet" href="__PUBLIC__/plugins/datatables/dataTables.bootstrap.css">

  <!-- <link rel="stylesheet" href="__PUBLIC__/plugins/datatables/select.bootstrap.min.css"> -->


  <!-- ／定制结束 -->
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="hold-transition skin-blue sidebar-mini ">
<div class="wrapper">
  <!-- 菜单 -->
  <include file="layout/menu"/>
  <!-- ／导航菜单 -->
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        用户中心
        <small>基础信息</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">管理</a></li>
        <li class="active">修改密码</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <!-- box -->
          <div class="box1 box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">修改密码</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
              <div class="box-body">
                <div class="col-xs-8">
                  <div class="form-group">
                    <label for="exampleInputPassword1">原密码</label>
                    <input required type="password" class="form-control password" name="password" placeholder="原密码">
                  </div>
                </div>
              </div>
              <div class="overlay hidden">
                <i class="fa fa-refresh fa-spin"></i>
              </div>
              <!-- /.box-body -->
              <div class="box-footer">
                <button id="checkorigin" type="button" class="btn btn-primary">下一步</button>
              </div>
          </div>
          <!-- /.box -->
          <!-- box -->
          <div class="box2 box box-primary hidden">
            <div class="box-header with-border">
              <h3 class="box-title">修改密码</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <form id='form' role="form" action="editPwd" method="post">
              <div class="box-body">
                <div class="col-xs-8">
                  <div class="form-group">
                    <label for="exampleInputPassword1">新密码</label>
                    <input required type="password" class="newpwd form-control" name="password" placeholder="新密码">
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">确认密码</label>
                    <input required type="password" class="newpwd form-control" placeholder="确认密码">
                  </div>
                </div>
              </div>

              <!-- /.box-body -->
              <div class="box-footer">
                <button id="submit" type="button" class="btn btn-primary">更改</button>
              </div>
            </form>
            <div class="overlay hidden">
                <i class="fa fa-refresh fa-spin"></i>
            </div>
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <include file="layout/copyright" />
</div>
<!-- ./wrapper -->
<!-- REQUIRED JS SCRIPTS -->
<!-- 外头文件 -->
<include file="layout/footer" />
<!-- 当前定制 -->
<!-- DOM 操作 -->

<!-- ./DOM -->

<!-- AJAX -->
<script type="text/javascript">
$(document).ready(function() {
  $('#checkorigin').click(function(){
    $('.box1 .overlay').removeClass('hidden');
    $.get('checkPassword',{
      'password':$('.box1 .password').val()
    },function(data){
      $('.box1 .overlay').addClass('hidden');
      if(data=='1'){
        $('.box2').removeClass('hidden');
        $('.box1').addClass('hidden');
      }else{
        alert('密码不对');
      }
    });
  });

  $('#submit').click(function(){
    var button = $(this);
    $('.box2 .overlay').removeClass('hidden');
    var input1 = $('.newpwd:eq(0)').val();
    var input2 = $('.newpwd:eq(1)').val();
    if(!input1||!input2)alert('新密码不能为空');
    else if(input1!=input2)alert('两次密码不一致');
    else{
      $.post('editPwd',{'password':input1},function(data){
        $('.box2 .overlay').addClass('hidden');
        if(data==1){
          $('.box1').removeClass('hidden');
          $('.box2').addClass('hidden');
          $('.box1 .password').val("");
          alert('修改成功');
        }else{
          alert('没有修改');
        }
      });
    }
  });



});
</script>
<!-- /AJAX -->

<!-- ./定制结束 -->
</body>
</html>